<template>
  <div class="flex h-full">
    <a-card class="mr-2" :body-style="{ height: '100%', display: 'flex', flexDirection: 'column', padding: '8px' }">
      <a-select
        v-model:value="mrmCode"
        class="w-full"
        :options="caseTypeOptions"
        :field-names="{ label: 'mrmName', value: 'mrmCode' }"
        placeholder="病历类型"
        @change="onSelectChange"
      />
      <a-input-search v-model:value="searchKey" placeholder="模板名称/助记码" class="mt-1" @search="onSearch" />
      <a-tabs v-model:active-key="suitType" class="mt-1">
        <a-tab-pane :key="1" tab="科室" />
        <a-tab-pane :key="0" tab="个人" />
        <a-tab-pane :key="2" tab="全院" />
        <a-tab-pane key="" tab="全部" />
      </a-tabs>
      <SuitList ref="suitListRef" :suit-type="suitType" :search-key="searchKey" :mrm-code="mrmCode" :mrm-name="mrmName" :template-type="4" select-default />
    </a-card>
    <div class="flex flex-col flex-1 overflow-hidden">
      <SuitHeader :template-type="4" />
      <div class="flex flex-1 mt-2 overflow-hidden">
        <a-card class="flex-1 overflow-auto" :body-style="{ padding: '8px', height: '100%', overflow: 'hidden' }">
          <Case :mrm-code="mrmCode" />
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { post } from '@/utils/request'
import SuitHeader from '../../components/SuitHeader'
import SuitList from '../../components/SuitList'
import Case from './Case'

const suitType = ref(1)
const searchKey = ref()
const suitListRef = ref()
const onSearch = () => {
  suitListRef.value.getData()
}
//获取病历类型
const caseTypeOptions = ref([])
const mrmCode = ref()
const mrmName = ref()
const getCaseTypeOptions = async () => {
  const res = await post('/common/const/getMedicalRecordMode', { mrmType: 0 })
  caseTypeOptions.value = res.data || []
  mrmCode.value = res.data?.[0]?.mrmCode
  mrmName.value = res.data?.[0]?.mrmName
}
const onSelectChange = (e) => {
  mrmName.value = caseTypeOptions.value.filter((item) => {
    return item.mrmCode === e
  })[0]?.mrmName
}
onMounted(() => {
  getCaseTypeOptions()
})
</script>
<style lang="less" scoped>
:deep(.ant-radio-button-wrapper) {
  padding: 0 25px;
}
:deep(.ant-input-clear-icon) {
  display: none;
}
</style>
